<html>
    <head>
        <title>CYA fun</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="style.css"/>
        <link rel="stylesheet" href="flexslider.css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="mystyle.js"></script>
        <script src="jquery.flexslider.js"></script>
        <script src="modernizr.js"></script>
    </head>
    <body class="cya-body">
        <div class="cya-container">
            <div class="header">
                <div class="header-top row">
                    <div class="left-header col-sm-5">CYA FUN</div>
                    <div class="right-header col-sm-7">
                        <div class="right-header-top col-xs-12">
                            <div class="player-online">Online</div>
                            <div class="player-online-content">
                                2,000 Players
                            </div><span>|</span>
                            <div class="player-online-content">
                                200 Tourmaments
                            </div>
                            <div class="language-box">
                                <select>
                                    <option>vietnam</option>
                                    <option>English</option>
                                </select>
                            </div>
                        </div>
                        <div class="right-header-bottom col-xs-12">
                            <div class="btn-login col-sm-4">
                                <div>Login</div>
                                <span>|</span>
                                <div>Register</div>                                    
                            </div>
                            <div class="link-to-facebook col-sm-8">
                                <ul class="group">
                                    <li>
                                        <div class="btn-facebook btn-link-to-facebook">Like</div><div class="count-facebook-like">18</div>
                                    </li>
                                    <li><div class="btn-tweet btn-link-to-facebook">Tweet</div><div class="count-facebook-like">68</div></li>
                                    <li><div class="btn-google btn-link-to-facebook">google +</div><div class="count-facebook-like">68</div></li>
                                </ul>
                            </div>
                        </div>                        
                    </div>
                </div>
                <div class="navbar navbar-default">
                    <div class="container-fluid cya-navbar">
                        <div class="navbar-header">

                            <!--                            <form class="navbar-form navbar-right cya-search" role="search">
                                                            <div class="form-group">
                                                                <input type="text" class="form-control" placeholder="Search">
                                                            </div>
                                                            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                                                        </form>-->
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse cya-navbar" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="nav-active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                                <li><a href="#">OUR GAMES</a></li>
                                <li><a href="#">ACCOUNT</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                                        NEWS 
                                        <span class="caret"></span>                                    
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">HELP AND SUPPORTS</a></li>
                            </ul>
                            <form class="navbar-form navbar-right cya-search" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                </div>
                                <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


            <div class="cya-slider">
                <div class="slider-top group">
                    <div class="mainslider group">
                        <ul class="slides">
                            <li>
                                <img src="2014-12-19_165651.jpg" />
                            </li>
                            <li>
                                <img src="2014-12-19_165725.jpg" />
                            </li>
                            <li>
                                <img src="spin-and-go-hp-1.jpg" />
                            </li>
                            <li>
                                <img src="2014-12-19_165725.jpg" />
                            </li>
                        </ul>
                    </div>
                    <script type="text/javascript">
                        $(window).load(function() {
                            $('.mainslider').flexslider({
                                animation: "slide",
                                start: function(slider) {
                                    $('body').removeClass('loading');
                                }
                            });
                        });
                    </script>
                </div>

                <div class="how-to-play group">
                    <div class="how-to-play-content how-to-play-content-first col-xs-6  col-sm-3">
                        <div class="triangle-left"></div>
                        HOW TO <br><span> PLAY</span><span style="font-size: 20px; top: -7px; left: 15px;" class="glyphicon glyphicon-play"></span>
                    </div>
                    <div class="how-to-play-content col-xs-6 col-sm-3">
                        <div class="how-to-play-content-title">
                            <div class="top-player-number">1</div>
                            Register
                        </div>
                        Simple registration. 
                        You’ll be playing in no time
                    </div>
                    <div class="how-to-play-content col-xs-6 col-sm-3">
                        <div class="how-to-play-content-title">
                            <div class="top-player-number">2</div>
                            Download
                        </div>
                        Download game from list game
                        Very fast & forever on your mobile.
                    </div>
                    <div class="how-to-play-content col-xs-6 col-sm-3">
                        <div class="how-to-play-content-title">
                            <div class="top-player-number">3</div>
                            Play
                        </div>
                        Improve your skills against 
                        players at your level
                        <div class="triangle-right"></div>
                    </div>
                </div>
                <div class="slider-bottom group">

                    <script type="text/javascript">
                        $(window).load(function() {
                            $('.flexslider').flexslider({
                                animation: "slide",
                                animationLoop: false,
                                itemWidth: 260,
                                itemMargin: 5,
                                pausePlay: true,
                                controlNav: false,
                                start: function(slider) {
                                    $('body').removeClass('loading');
                                }
                            });
                        });</script>
                </div> 

                <div class="slider-bottom group">
                    <div class="slider-bottom-header">
                        <hr>
                        <div>TOURNAMENTS</div>
                        <hr>
                    </div>
                    <section class="slider">
                        <div class="flexslider carousel">
                            <ul class="slides">
                                <li>
                                    <img src="2014-12-19_165725.jpg" />
                                </li>
                                <li>
                                    <img src="2014-12-19_165651.jpg" />
                                </li>
                                <li>
                                    <img src="2014-12-19_165746.jpg" />
                                </li>
                                <li>
                                    <img src="2014-12-19_165725.jpg" />
                                </li>
                                <li>
                                    <img src="2014-12-19_165651.jpg" />
                                </li>
                                <li>
                                    <img src="2014-12-19_165746.jpg" />
                                </li>                                
                            </ul>
                        </div>
                    </section>
                    <script type="text/javascript">
                        $(window).load(function() {
                            $('.flexslider').flexslider({
                                animation: "slide",
                                animationLoop: false,
                                itemWidth: 260,
                                itemMargin: 5,
                                pausePlay: true,
                                start: function(slider) {
                                    $('body').removeClass('loading');
                                }
                            });
                        });
                    </script>
                </div>                
            </div>

            <div class="body group">
                <div class="body-top group">
                    <div class="tab-header-before">
                        <div class="tab-header-before-top"></div>
                        <div class="tab-header-triangle"></div>
                    </div>
                    <div class="top-player col-sm-4">
                        <div class="tab-header body-header"><img src="icon-top-player.png" />TOP PLAYERS</div>
                        <ul class="tabs">
                            <li><a href="#today" class="active">Today</a></li>
                            <li><a href="#week">This Week</a></li>
                            <li><a href="#allTime">All Times</a></li>
                        </ul>
                        <div class="tab_container">
                            <div id="today" class="tab_content">
                                <ul>                                      
                                    <li><div class="top-player-number">1</div><div class="top-player-content">kien</div><div class="top-player-count">2048</div></li>
                                    <li><div class="top-player-number">1</div><div class="top-player-content">nguyen</div><div class="top-player-count">1024</div></li>
                                    <li><div class="top-player-number">1</div><div class="top-player-content">van</div><div class="top-player-count">512</div></li>
                                </ul> 
                            </div>

                            <div id="week" class="tab_content">
                                <ul>  
                                    <li><div class="top-player-number">1</div><div class="top-player-content"></div><div class="top-player-count"></div></li>
                                    <li><div class="top-player-number">1</div><div class="top-player-content"></div><div class="top-player-count"></div></li>
                                    <li><div class="top-player-number">1</div><div class="top-player-content"></div><div class="top-player-count"></div></li>
                                    <li><div class="top-player-number">1</div><div class="top-player-content"></div><div class="top-player-count"></div></li>                                    
                                </ul> 
                            </div>

                            <div id="allTime" class="tab_content">
                                <ul> 
                                    <li><div class="top-player-number">1</div><div class="top-player-content"></div><div class="top-player-count"></div></li>
                                    <li><div class="top-player-number">1</div><div class="top-player-content"></div><div class="top-player-count"></div></li>
                                    <li><div class="top-player-number">1</div><div class="top-player-content"></div><div class="top-player-count"></div></li>
                                    <li><div class="top-player-number">1</div><div class="top-player-content"></div><div class="top-player-count"></div></li>
                                </ul> 
                            </div>
                        </div>

                    </div>

                    <div class="recomment-game col-sm-8">
                        <div class="recomment-game-header body-header"><div class="triangle-right" style="bottom: 30px; left: 5px;"></div>RECOMMENDED GAMES</div>
                        <div class="recomment-game-header-content">
                            <ul class="group">
                                <li class="group">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165651.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s, when an unknown printer took a galley of type and scrambled it to 
                                        make a type specimen book. It has survived not only five centuries, but also 
                                        the leap into electronic typesetting, remaining essentially unchanged. It was 
                                        popularised in the 1960s
                                    </div>
                                </li>
                                <li class="group">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165725.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s, when an unknown printer took a galley of type and scrambled it to 
                                        make a type specimen book. It has survived not only five centuries, but also 
                                        the leap into electronic typesetting, remaining essentially unchanged. It was 
                                        popularised in the 1960s
                                    </div>
                                </li>
                                <li class="group">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165746.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s, when an unknown printer took a galley of type and scrambled it to 
                                        make a type specimen book. It has survived not only five centuries, but also 
                                        the leap into electronic typesetting, remaining essentially unchanged. It was 
                                        popularised in the 1960s
                                    </div>
                                </li>                            
                            </ul>
                            <div class="">1,2,3,4</div>
                        </div>
                    </div>
                </div>

                <div class="body-bottom group">
                    <div class="game-focus col-sm-4">
                        <div class="body-header"><img src="icon-game-focus.png" />Game focus</div>
                        <div class="game-focus-content"><img src="2014-12-19_165651.jpg" class="img-responsive" /></div>
                    </div>
                    <div class="body-new col-sm-8">
                        <div class="news-header body-header"><div class="triangle-right" style="bottom: 7px; left: 5px;"></div>News</div>
                        <div class="body-new-content">
                            <ul class="group">
                                <li class="group col-xs-6">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165651.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s
                                    </div>
                                </li>
                                <li class="group col-xs-6">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165725.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s
                                    </div>
                                </li>
                                <li class="group col-xs-6">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165746.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s
                                    </div>
                                </li>  
                                <li class="group col-xs-6">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165651.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s
                                    </div>
                                </li>
                                <li class="group col-xs-6">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165725.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s
                                    </div>
                                </li>
                                <li class="group col-xs-6">
                                    <div class="recomment-game-image col-xs-5 col-sm-4"><img src="2014-12-19_165746.jpg" class="img-responsive" /></div>
                                    <div class="recomment-game-text col-xs-7 col-sm-8">
                                        <h3>Lorem Ipsum is simply dummy text </h3>
                                        Lorem Ipsum has been the industry’s standard dummy text ever since the 
                                        1500s
                                    </div>
                                </li>
                            </ul>
                            <div class="">1,2,3,4</div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="footer group">
                <div class="footer-content footer-left col-sm-6">CYA FUN</div>
                <div class="footer-content footer-right col-sm-6">Copyright © 2014, <a href="#">Cyafun.com</a>. All rights reserved. </div>
            </div>
        </div>
    </body>
</html>
